<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作业一</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="css/index.css">
    
</head>
<body>
    <div class="nav"> </div>
    <div class="container">
        <h4></h4>
        <img  src="" >
        <p class="content"></p>
        <h4 class="sentence"></h4>
        <ul>
            <li class="sOne"></li>
            <li class="sTwo"></li>
            <li class="sThree"></li>
        </ul>
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <script>
        // 1.在服务器端创建数据
        var url="https://www.easy-mock.com/mock/5d2fe4e35ee5224e426f4a67/demo/index"
        $.ajax({
            url,
            daraType:"json",
            // 从服务器获取数据
            success:res=>{
                var {title,nav,imageUrl,content,sentence,sOne,sTwo,sThree,dt,dd} =res.data;
                // 将从服务器获取的数据渲染到页面上
                $(".title").html(title)
                $(".nav").html(nav)
                $("img").html(img)
                $(".content").html(content)
                $(".sentence").html(sentence)
                $(".sOne").html(sOne)
                $(".sTwo").html(sTwo)
                $(".sThree").html(sThree)
                $("dt").html(dt)
                $("dd").html(dd)
            }
        })
    </script>
    
</body>
</html>